<template>
    <div class="block">
            <el-carousel height="150px">
                <el-carousel-item v-for="item in banners" :key="item.src">
                   <a :href="item.link">
                       <img :src="item.image" @load="imageload">
                   </a>
                </el-carousel-item>
            </el-carousel>
        </div>
</template>

<script>
export default {
    name: "HomeSwiper",
    props:{
        banners:{
            type: Array,
            default(){
                return []
            }
        }
    },
    data(){
        return {
            isLoad: false
        }
    },
    methods:{
        imageload(){
            if(!this.isLoad){
                this.$emit('swiperImageLoad')
                this.isLoad = true
            }
            
        }
    }

}
</script>

<style scoped>
  
img{
    width: 100%;
    height: 100%;
}
</style>